<template>
  <view class="container">
    <view class="topbar">
      <uni-grid :square='false' :showBorder='false' :column="4" :highlight="true" @change="topbarChange">
        <uni-grid-item v-for="(item, index) in topbarList" :square='false' :index="index" :key="index">
          <view class="grid-item-box" style="background-color: #fff;">
            <image style="width: 89rpx;height:88rpx" :src="item.icon" mode="aspectFill"></image>
            <view class="text">{{item.text}}</view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <view class="tabbar">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#0b8cff"></uni-segmented-control>
    </view>

    <view class="question">
      <uni-collapse ref="collapse" v-model="value" @change="collapseChange">
        <uni-collapse-item title="如何租借？">
          <view class='text'>
						扫描机柜二维码即可租借
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="扫码后充电宝未弹出怎么办？">
          <view class='text'>
            您好，租借可能受网络波动影响，建议您稍等3-5分钟再次扫
            码。如提手有正在进行中的订单不能重复扫码，请联系在线客
            服。
          </view>
        </uni-collapse-item>
        <uni-collapse-item title="充电宝无法充电怎么办？？">
          <view class='text'>
            5分钟之内是不收费，可以归还后，重新租借。
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>

    <view class="service">
      <view class="item" >
        <image src="@/static/helpCenter/help_icon06.png" mode="aspectFill"></image>
        <view class="text">
          在线客服
        </view>
      </view>
      <view class="item">
        <image src="@/static/helpCenter/help_icon05.png" mode="aspectFill"></image>
        <view class="text">
          客服电话
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue"
  import icon1 from "@/static/helpCenter/help_icon01.png"
  import icon2 from "@/static/helpCenter/help_icon02.png"
  import icon3 from "@/static/helpCenter/help_icon03.png"
  import icon4 from "@/static/helpCenter/help_icon04.png"
  let topbarList = ref([{
    icon: icon1,
    text: '充电宝丢失'
  }, {
    icon: icon2,
    text: '计费疑问'
  }, {
    icon: icon3,
    text: '显示未归还'
  }, {
    icon: icon4,
    text: '其它问题'
  }])

  let items = ref(['使用', '支付', '归还', '退款'])

  let value = ref([])


  let current = ref(0)
  const topbarChange = ({ detail }) => {
    console.log(detail)
  }

  const collapseChange = (e) => {
    console.log(e)
  }


  const onClickItem = (e) => {
    if (current.value != e.currentIndex) {
      current.value = e.currentIndex;
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f4f6f9;
  }

  .container {
    .topbar {
      .grid-item-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 35rpx 0;
				
				.text {
					color: #464a4f;
					font-size: 13px;
					margin-top: 10rpx;
				}
      }
    }

    .tabbar {
      background-color: #ffffff;
      border-top: 2rpx solid #f4f6f9;
    }

    .question {
      margin-top: 10rpx;

      .text {
        color: #838484;
        padding: 20rpx 30rpx;
        font-size: 22rpx;
      }
    }

    .service {
      position: fixed;
      bottom: 400rpx;
      right: 0rpx;

      .item {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 20rpx;

        image {
          width: 38rpx;
          height: 38rpx;
          margin-right: 10rpx;
        }

        .text {
          font-size: 26rpx;
        }
      }
    }
  }
</style>